<template>
  <div id="OpponentDetails">
    <div class="homeTitle">交易对手详情</div>
    <div class="tablelist">
      <table>
        <!-- <tr> 
          <td>交易对手编号</td>
          <td><el-input v-model="bianhao" placeholder="提交后自动生成" disabled size="small"></el-input></td>
        </tr> -->
        <tr> 
          <td><span class="bitian">*</span>机构标识</td>
          <td>
            <el-select v-model="identification" placeholder="请选择" size="small">
              <el-option v-for="item in jgbs" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>同业标识</td>
          <td>
            <el-select v-model="mark" placeholder="请选择" size="small">
              <el-option v-for="item in tybs" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构类型</td>
          <td>
            <el-select v-model="type" placeholder="请选择" size="small">
              <el-option v-for="item in jyjglx" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构简称</td>
          <td><el-input v-model="simple" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构全称</td>
          <td><el-input v-model="full" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构法人代表</td>
          <td><el-input v-model="userName" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构联系电话</td>
          <td><el-input v-model="phone" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构金融许可证</td>
          <td><el-input v-model="licence" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构组织机构代码</td>
          <td><el-input v-model="code" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构统一社会信用代码</td>
          <td><el-input v-model="creditCode" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构地址</td>
          <!-- -----------------地址---------------------- -->
          <td class="shengshi">
            <el-select v-model="sheng" placeholder="请选择省份" size="small" @change="changeSheng">
              <el-option v-for="item in shengOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="shi" placeholder="请选择地市" size="small" @change="changgeshi">
              <el-option v-for="item in shiOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-input v-model="addressDetail" placeholder="请输入详细地址" size="small" class="swdyinput"></el-input>
          </td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构传真</td>
          <td><el-input v-model="fax" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构邮编</td>
          <td><el-input v-model="mechanismCode" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>交易机构统一授信额度(万元)</td>
          <td><el-input v-model="creditLine" placeholder="最多保留6位小数" type="number" size="small" @blur="blurnum"></el-input></td>
        </tr>
        <!-- <tr> 
          <td>交易机构当前可用额度(万元)</td>
          <td>自动计算不可编辑</td>
        </tr> -->
      </table>     
    </div>
    <div class="bottomTable">
      <div class="table">
        <table>
          <tr>
            <td><span style="color: red">*</span>业务类型</td>
            <td><span style="color: red">*</span>账户名称</td>
            <td><span style="color: red">*</span>开户银行</td>
            <td><span style="color: red">*</span>账号</td>
            <td><span style="color: red">*</span>支付系统行号</td>
            <td>托管机构</td>
            <td>托管账户名称</td>
            <td>托管账号</td>
            <td>操作</td>
          </tr>
          <tr v-for="(item, index) in accountJson" :key="index">
            <td>{{item.type}}</td>
            <td>{{item.accountName}}</td>
            <td>{{item.openBank}}</td>
            <td>{{item.number}}</td>
            <td>{{item.payment}}</td>
            <td>{{item.trusteeship}}</td>
            <td>{{item.trusteeshipAccountName}}</td>
            <td>{{item.managedAccount}}</td>
            <td><el-button type="primary" size="small" @click="delate(item, index)">删除</el-button></td>
          </tr>
          <tr>
            <td>
              <el-select v-model="addObj.ywlx" placeholder="请选择" size="small">
                <el-option v-for="item in ywlxOption" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </td>
            <td><el-input v-model="addObj.zhmc" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="addObj.khyh" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="addObj.zh" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="addObj.zfxthh" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="addObj.tgjg" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="addObj.tgzhmc" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="addObj.tgzh" placeholder="请输入" size="small"></el-input></td>          
            <td>
              <el-button type="primary" size="small" @click="add">添加</el-button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" size="small" @click="submit">提交</el-button>
      <el-button type="primary" size="small" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import cityData from '../../../assets/js/city.js';
export default {
  name: "OpponentDetails",
  data() {
    return {
      jgbs: ['联社系统内','联社系统外'],
      ywlxOption: ['债券投资','债券回购','同业拆借','理财交易','其他资产交易'],
      tybs:['银行类金融机构','非银行类金融机构'],
      jyjglx:['国有控股商业银行','全国性股份制商业银行','政策性银行','城市商业银行','村镇银行','省外系统内-省级银行业存款类金融机构','省外系统内-地市级银行业存款类金融机构','省外系统内-县级银行业存款类金融机构','省外系统内-其他存款类金融机构','其他银行业存款类金融机构','银行业非存款类金融机构','证券业金融机构','保险业金融机构','交易及结算类金融机构','特殊目的载体金融机构','小额贷款公司','金融控股公司','境内其他金融机构','境外同业'],
      bianhao: '',
      data: '',
      // ---------------------
      identification: '',
      mark: '',
      type: '',
      simple: '',
      full: '',
      userName: '',
      phone: '',
      licence: '',
      code: '',
      creditCode: '',
      address: '',
      fax: '',
      mechanismCode: '',
      creditLine: '',
      // ---------------------
      available: '',
      accountJson: [],
      accountStr: [],
      addObj: {
        ywlx: '',
        zhmc: '',
        khyh: '',
        zh: '',
        zfxthh: '',
        tgjg: '',
        tgzhmc: '',
        tgzh: ''
      },
      shengOption: [],
      sheng: '',
      shiOption: [],
      shi: '',
      addressDetail: ''
    };
  },
  mounted() {
    this.getsheng();  
  },
  methods: {
    changeSheng () {
      this.shi = '';
      this.addressDetail = '';
      let data = cityData[86];
      let shengKey = '';
      for(let k in data) {
        if(data[k]==this.sheng) {
          shengKey = k;
        }
      }
      let shidata = cityData[shengKey];
      this.shiOption = [];
      for(let k in shidata) {
        this.shiOption.push(shidata[k]);
      }
    },
    changgeshi () {
      this.addressDetail = '';
    },
    getsheng () {
      let data = cityData[86];
      for(let k in data) {
        this.shengOption.push(data[k]);
      }
    },
    submit () {
      let obj= {
        identification: this.identification,
        mark: this.mark,
        type: this.type,
        simple: this.simple,
        full: this.full,
        userName: this.userName,
        phone: this.phone,
        licence: this.licence,
        code: this.code,
        creditCode: this.creditCode,
        provice: this.sheng,
        city: this.shi,
        address: this.addressDetail,
        fax: this.fax,
        mechanismCode: this.mechanismCode,
        creditLine: this.creditLine,
        accountJson: this.accountJson
      }
      let status = true;
      for(let k in obj) {
        if(!obj[k]) {
          status = false;
        }
      }
      console.log(status);
      if (status) {
        obj.available = null;
        this.axios.post('counterparty/addOrUpdate', obj)
          .then(({data})=> {
            if(data.code == 200) {
              this.$message({message: '添加成功',type: 'success'});
              this.$router.go(-1);
            }
          })
      } else {
        this.$message({message: '请您填写完整',type: 'warning'});
      }
    },
    addAccount () {
    },
    cancel () {
      this.$router.go(-1);
    },
    add () {
      let obj= this.addObj;
      let status = true;
      for (let k in obj) {
        if (k=='tgjg' || k=='tgzhmc' || k=='tgzh') {
          continue;
        }else if(!obj[k]) {
          status = false;
        }
      }
      if (!status) {
        this.$message({message: '请您填写完整',type: 'warning'});
      } else {
        let arrdata =  {type: this.addObj.ywlx, accountName: this.addObj.zhmc, openBank: this.addObj.khyh, number: this.addObj.zh, payment: this.addObj.zfxthh, trusteeship: this.addObj.tgjg, trusteeshipAccountName: this.addObj.tgzhmc, managedAccount: this.addObj.tgzh};
        let tempStr = '';
        for (let k in arrdata) {
          tempStr += k+arrdata[k];
        };
        let findResult = this.accountStr.find((item, index, arr) => {
          return item == tempStr;
        });
        if (!findResult) {
          this.accountStr.push(tempStr);
          this.accountJson.push(arrdata);
          for (let k in this.addObj) {
            this.addObj[k] = '';
          };
        } else {
          this.$message({message: '请勿重复添加',type: 'warning'});
        }
      }
    },
    delate (item, index) {
      this.accountStr.splice(index, 1);
      this.accountJson.splice(index, 1);
    },
    blurnum () {
      if (!this.creditLine) return false
      this.creditLine = (this.creditLine-0).toFixed(6);
    }
  }
};
</script>

<style lang="scss">
#OpponentDetails {
  .tablelist {
    margin-top: 30px;
    table {
      border: 1px solid white;
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 50px;
      tr {
        td {
          text-align: center;
          padding: 5px 10px;
          border-right: 1px solid white;
          border-bottom: 1px solid white;
          &:first-child {
            background: #343839;
            color: white;
            width: 30%;
            .bitian {
              color: red;
            }
          }
          &:last-child {
            background: #7a7a73;
            color: white;
            text-align: left;
          }
          .el-select {
            width: 100%;
          }
          &.fourS {
            // display: flex;
            // justify-content: space-between;
            .el-select {
              width: 18%;
            }
          }
          .el-tag {
            background: white;
            margin-right: 20px;
            margin-bottom: 10px;
            .el-icon-close {
              background-color: red;
              color: white;
            }
          }
        }
      }
    }
    .lastTable {
      margin-bottom: 0px;
      .tdLeft {
        width: 30%;
      }
      td {
        width: 70%;
         &.fourS {
          .el-select {
            width: 18%;
          }
          .el-button {
            // margin-left: 25px;
          }
        }
      }

    }
    tr {
      td {
        text-align: center;
        padding: 5px 10px;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
        &:first-child {
          background: #343839;
          color: white;
          width: 30%;
          .bitian {
            color: red;
          }
        }
        &:last-child {
          background: #7a7a73;
          color: white;
          text-align: left;
        }
        .el-select {
          width: 100%;
        }
      }
    }
  }
  .bottomTable {
    table {
      border: 1px solid white;
      width: 100%;
      border-collapse: collapse;
        tr {
          &:first-child {
            background-color: #181C1D !important;;
            color: white;
            td {
              background-color: #181C1D !important;
            }
          }
          td {
            text-align: center;
            padding: 5px 10px;
            border-right: 1px solid white;
            border-bottom: 1px solid white;
            color: white;
            background: #7a7a73;
          }
      }
    }
    .addwhite {
      height: 46px;
      background-color: white;
      padding: 0 20px;
      span {
        color: #cccccc;
        line-height: 46px;
      }
    }
  }
  .btn {
    text-align: center;
    margin-top: 20px;
  }
  .shengshi {
    display: flex;
    justify-content: space-between;
    .el-select {
      width: 20% !important;
    }
    .swdyinput {
      width: 56%;
    }
  }
}
</style>
